#!/bin/bash

# Trim规格显示JavaScript加载验证脚本

RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

echo "🔥 JavaScript文件加载和函数检查"
echo "================================================"

# 检查服务器状态
echo -n "检查服务器状态... "
if curl -s http://localhost:5700/health > /dev/null 2>&1; then
    echo -e "${GREEN}✅ 服务器运行正常${NC}"
else
    echo -e "${RED}❌ 服务器未启动${NC}"
    exit 1
fi

echo ""
echo "🔧 JavaScript文件访问性检查"
echo "----------------------------------------"

# 检查main.js
echo -n "  检查main.js加载... "
if curl -s -I http://localhost:5700/web/assets/js/main.js | grep "200 OK" > /dev/null; then
    echo -e "${GREEN}✅ 可访问${NC}"
else
    echo -e "${RED}❌ 无法访问${NC}"
fi

# 检查trim.js
echo -n "  检查trim.js加载... "
if curl -s -I http://localhost:5700/web/assets/js/trim.js | grep "200 OK" > /dev/null; then
    echo -e "${GREEN}✅ 可访问${NC}"
else
    echo -e "${RED}❌ 无法访问${NC}"
fi

# 检查文件大小
echo ""
echo "📏 JavaScript文件大小检查"
echo "----------------------------------------"
MAIN_SIZE=$(curl -s -I http://localhost:5700/web/assets/js/main.js | grep -i "content-length" | awk '{print $2}' | tr -d '\r')
TRIM_SIZE=$(curl -s -I http://localhost:5700/web/assets/js/trim.js | grep -i "content-length" | awk '{print $2}' | tr -d '\r')

echo "  main.js: ${MAIN_SIZE} bytes"
echo "  trim.js: ${TRIM_SIZE} bytes"

if [ "$MAIN_SIZE" -gt 1000 ] && [ "$TRIM_SIZE" -gt 1000 ]; then
    echo -e "${GREEN}✅ 文件大小正常${NC}"
else
    echo -e "${RED}❌ 文件可能损坏或内容不完整${NC}"
fi

echo ""
echo "🔍 JavaScript函数定义检查"
echo "----------------------------------------"

# 检查关键函数是否存在
echo -n "  检查showTrims函数... "
if grep -q "function showTrims" "web/assets/js/trim.js"; then
    echo -e "${GREEN}✅ 已定义${NC}"
else
    echo -e "${RED}❌ 未定义${NC}"
fi

echo -n "  检查renderTrimSpecs函数... "
if grep -q "function renderTrimSpecs" "web/assets/js/trim.js"; then
    echo -e "${GREEN}✅ 已定义${NC}"
else
    echo -e "${RED}❌ 未定义${NC}"
fi

echo -n "  检查renderCategoryArraySpecs函数... "
if grep -q "function renderCategoryArraySpecs" "web/assets/js/trim.js"; then
    echo -e "${GREEN}✅ 已定义${NC}"
else
    echo -e "${RED}❌ 未定义${NC}"
fi

echo ""
echo "🌐 浏览器JavaScript错误模拟测试"
echo "----------------------------------------"

# 创建简单的HTML测试页面来验证JavaScript是否能正确执行
cat > temp_js_test.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
    <title>JS Test</title>
    <script>
        console.log('测试开始');
        
        // 模拟加载trim.js中的函数
        function testFunction() {
            console.log('测试函数执行');
            
            // 测试对象处理
            const testData = {
                "Battery": [{"spec_name": "Battery Capacity", "spec_value": "43", "spec_unit": "kWh"}],
                "Engine": [{"spec_name": "Power", "spec_value": "200", "spec_unit": "hp"}]
            };
            
            console.log('测试数据:', testData);
            
            // 测试renderCategoryArraySpecs逻辑
            const result = Object.entries(testData)
                .filter(([categoryName, items]) => Array.isArray(items) && items.length > 0)
                .map(([categoryName, items]) => {
                    return `分类: ${categoryName}, 项目数: ${items.length}`;
                }).join('; ');
                
            console.log('处理结果:', result);
            document.body.innerHTML = '<h3>JavaScript测试结果:</h3><p>' + result + '</p>';
        }
        
        window.onload = testFunction;
    </script>
</head>
<body>
    <p>加载中...</p>
</body>
</html>
EOF

echo "  创建测试页面: temp_js_test.html"
echo "  在浏览器中打开该页面来检查JavaScript执行情况"

echo ""
echo "💡 问题诊断建议"
echo "----------------------------------------"
echo "1. 检查浏览器开发者工具Console是否有JavaScript错误"
echo "2. 验证trim.js中的函数是否被正确调用"
echo "3. 确认HTML中的script标签路径是否正确"
echo "4. 检查是否有JavaScript文件加载顺序问题"

echo ""
echo "📋 手动验证步骤"
echo "----------------------------------------"
echo "1. 打开浏览器访问: http://localhost:5700/web/"
echo "2. 按F12打开开发者工具"
echo "3. 点击任意车型的'查看配置'按钮"
echo "4. 检查Console中的错误信息"
echo "5. 在Console中输入: typeof showTrims"
echo "6. 应该返回'function'而不是'undefined'"

echo ""
echo "🔄 如果问题仍然存在，尝试："
echo "1. 强制刷新页面 (Ctrl+F5)"
echo "2. 清除浏览器缓存"
echo "3. 检查网络面板中JavaScript文件是否正确加载"
